<template>
  <div class="container">
    <div class="header">
      <h1>测试标题</h1>
    </div>
    <div class="left-bottom-box">
      <button
        class="screenshot"
        @click="screenshot"
        title="截屏"
        id="screenshot"
      >
        <img src="../images/screenshot.svg" />
      </button>
    </div>
  </div>
</template>
<script>
import html2canvas from "html2canvas";
import canvas2image from "@/utils/canvas2image";
export default {
  setup() {},
  methods: {
    screenshot() {
      //导出图片时隐藏
      html2canvas(document.body).then((canvas) => {
        console.log(canvas2image);
        var img = canvas2image.convertToImage(
          canvas,
          canvas.width,
          canvas.String,
          "png"
        );
        this.saveFile(img.src, "demo.png");
      });
    },
    saveFile(data, filename) {
      var save_link = document.createElementNS(
        "http://www.w3.org/1999/xhtml",
        "a"
      );
      save_link.href = data;
      save_link.download = filename;

      var event = document.createEvent("MouseEvents");
      event.initMouseEvent(
        "click",
        true,
        false,
        window,
        0,
        0,
        0,
        0,
        0,
        false,
        false,
        false,
        false,
        0,
        null
      );
      save_link.dispatchEvent(event);
    },
  },
};
</script>
<style scoped>
.container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.left-bottom-box {
  position: absolute;
  z-index: 9999;
  /* background-color: white; */
  border-radius: 5px;
  top: 15px;
  right: 15px;
}

.screenshot {
  cursor: pointer;
}

.screenshot img {
  width: 24px;
  height: 24px;
}

.header {
  color: white;
  z-index: 9999;
  width: 100%;
  text-align: center;
}
</style>